<template>
  <div class="aaa">
    <cmpTabs @F_GetTabsIndex="F_GetTabsIndex" :tabs="tabs" class="cmpTabs"></cmpTabs>

    <div class="tab2" v-if="tabIndex == 0|| tabIndex == 2">
      <ul>
        <li :class="[tab2Index == index+1?'tab2_active':'']" v-for="(item,index) in tab2" :key="index" @click="tab2Click(index)">{{item}}</li>
      </ul>
      <ul v-if="tab2Index == 2">
        <li :class="[tab3Index == index+1?'tab2_active':'']" v-for="(item,index) in tab3" :key="index" @click="tab3Click(index)">{{item}}</li>
      </ul>
    </div>

    <div class="tab2" v-if="tabIndex == 1">
      <ul>
        <li :class="[tab3Index_1 == index+1?'tab2_active':'']" v-for="(item,index) in tab3_1" :key="index" @click="tab3Click_1(index)">{{item}}</li>
      </ul>
    </div>

    <div class="tab2" v-if="tabIndex == 3">
      <ul>
        <li :class="[tab3Index_1 == index+1?'tab2_active':'']" v-for="(item,index) in tab3_3" :key="index" @click="tab3Click_1(index)">{{item}}</li>
      </ul>
    </div>

    <!-- <div class="container m_t_b">
      <img src="" alt="" class="img1">
      <div class="content">
        <ul class="content_left">
          <img src="../assets/img/url.png" alt="" class="img2">
          <li class="content_text">
            <h6>孟浩</h6>
            <span>第五名</span>
          </li>
        </ul>
        <ul class="content_right">50</ul>
      </div>
    </div> -->

    <div class="container" v-for="(item,index) in lists" :key="index" @click="constorm(item)">
      <figure class="flex_c_c_c img1" v-if="item.src">
        <img :src="item.src" alt="" style="width:100%;height: 100%;border-r">
      </figure>

      <!-- <img :src="item.src" alt="" class="img1" v-if="item.src"> -->

      <span class="img1" style="font-size:20px;" v-else>{{item.srcNum}}</span>

      <div class="content">
        <ul class="content_left">
          <figure class="flex_c_c_c img2">
            <img :src="item.avatar" alt="" style="width:100%;height: 100%;border-radius: 45px;" >
          </figure>
          <!-- <img :src="item.avatar" alt="" class="img2"> -->
          <li class="content_text">
            <h6>{{item.name||'未设定'}}</h6>
            <!-- <span v-if="false">第{{item.id}}名</span> -->
          </li>
        </ul>
        <ul class="content_right" v-if="tabIndex != 1">{{item.count}}</ul>
        <ul class="content_right_1" v-else>{{item.count}}单 | ¥{{item.money}}</ul>
      </div>
    </div>

    <span class="more">没有更多了...</span>
    <Loading v-show="LoadingShow"></Loading>
  </div>
</template>
<script>
import cmpTabs from "./common/index_tabs.vue";
import Loading from "./common/Loading.vue";
import Common from "../assets/js/common.js";
let Mycommon = new Common();

export default {
  components: { cmpTabs, Loading },
  data() {
    return {
      LoadingShow: true,
      tabs: ["客户人数", "订单量", "互动频率", "成交率区间"],
      tabIndex: 0,

      tab2: ["客户总数", "新增客户"],
      tab2Index: 1,
      tab3: ["昨日", "近七天", "近十五天", "近三十天"],
      tab3Index: 1,

      tab3Index_1: 1,
      tab3_1: ["昨日", "近七天", "近十五天", "近三十天"],

      tab3_3: ["1%-50%", "50%-100%", "全部"],

      lists: [],

      lists_0: [],
      lists_1: [],

      scrollHeight: "",

      page: "1",
      total_page: ""
    };
  },
  created() {
    //  alert(sessionStorage.getItem("userId"))
  },
  mounted() {
    this.index(1, 1, 1);
    let that = this;
    window.onscroll = function() {
      let h1;
      let h2;
      let h3;
      let h4;
      if (document.body.scrollTop > 0) {
        h1 = document.body.scrollTop;
        h2 = document.documentElement.clientHeight;
        h3 = h1 + h2 + 50;
        h4 = document.documentElement.scrollHeight;
      } else {
        h1 = document.documentElement.scrollTop;
        h2 = document.documentElement.clientHeight;
        h3 = h1 + h2 + 50;
        h4 = document.documentElement.scrollHeight;
      }
      if (h3 > h4) {
        if (that.tabIndex == 0 || that.tabIndex == 2) {
          if (that.total_page > that.page) {
            that.page++;
            that.index(that.tab2Index, that.tab3Index, that.page);
          }
        } else if (that.tabIndex == 1 || that.tabIndex == 3) {
          if (that.total_page > that.page) {
            that.page++;
            that.index_1(that.tab3Index_1, that.page);
          }
        }
      }
    };
  },
  methods: {
    F_GetTabsIndex(index) {
      this.total_page = "";
      this.page = "1";

      this.tabIndex = index;

      this.tab2Index = 1;
      this.tab3Index = 1;

      this.tab3Index_1 = 1;

      this.lists_0 = [];
      this.lists_1 = [];
      if (index == 1) {
        this.index_1(1, 1);
      } else if (index == 0 || index == 2) {
        this.index(1, 1, 1);
      } else if (index == 3) {
        this.index_1(1, 1);
      }
    },
    constorm(item) {
      let that = this;
      this.$store.commit("VSalesRankData", {
        item: item,
        index: that.tabIndex
      });
      // console.log(this.$store)
      this.$router.push({
        name: "C_list"
      });
    },

    index(sign, type, page) {
      let that = this;

      let data;
      let url;
      if (this.tabIndex == 0) {
        url = "BossRankClients";
        if (sign == "2") {
          data = {
            sign: sign,
            type: type,
            page: page
          };
        } else {
          data = {
            sign: sign,
            page: page
          };
        }
      } else if (this.tabIndex == 2) {
        url = "BossRankInteraction";
        data = {
          sign: sign,
          type: type,
          page: page
        };
      }

      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          that.LoadingShow = false;
          let list = res.data.data.list;
          //  alert(JSON.stringify(list))
          // console.log(list)
          that.total_page = res.data.data.total_page;

          list.forEach(val => {
            val.avatar =
              val.avatar ||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png";
          });
           
          if (!that.lists_0[0]) {
            let aa = [
              require("../assets/img/jin.png"),
              require("../assets/img/yin.png"),
              require("../assets/img/tong.png")
            ];
            list.forEach((val, index) => {
              if (index < 3) {
                val.src = aa[index];
              } else {
                val.srcNum = index + 1;
              }
            });
            that.lists_0 = list;
          } else {
            list.forEach((val, index) => {
              val.srcNum = that.lists_0.length + index + 1;
            });

            list.forEach(val => {
              that.lists_0.push(val);
            });
          }
          that.lists = that.lists_0;
          
        }
      });
    },

    index_1(type, page) {
      let that = this;
      let data = {
        type: type,
        page: page
      };
      let url;
      if (this.tabIndex == 1) {
        url = "BossRankOrder";
      } else if (this.tabIndex == 3) {
        url = "BossRankRate";
      }
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let list = res.data.data.list;
          list.forEach(val => {
            val.avatar =
              val.avatar ||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png";
          });
          that.total_page = res.data.data.total_page;
          
          if (!that.lists_1[0]) {
            let aa = [
            require("../assets/img/jin.png"),
            require("../assets/img/yin.png"),
            require("../assets/img/tong.png")
          ];
          list.forEach((val, index) => {
            if (index < 3) {
              val.src = aa[index];
            } else {
              val.srcNum = index + 1;
            }
          });
            that.lists_1 = list;
          } else {
             list.forEach((val, index) => {
              val.srcNum = that.lists_1.length + index + 1;
            });
            list.forEach(val => {
              that.lists_1.push(val);
            });
          }
          that.lists = that.lists_1;

        }
      });
    },

    tab2Click(index) {
      this.total_page = "";
      this.page = "1";

      this.lists_0 = [];
      this.tab2Index = index + 1;
      this.index(this.tab2Index, this.tab3Index, this.page);
    },
    tab3Click(index) {
      this.total_page = "";
      this.page = "1";

      this.lists_0 = [];
      this.tab3Index = index + 1;
      this.index(this.tab2Index, this.tab3Index, this.page);
    },

    tab3Click_1(index) {
      this.total_page = "";
      this.page = "1";

      this.lists_1 = [];
      this.tab3Index_1 = index + 1;
      this.index_1(this.tab3Index_1, this.page);
    }
  }
};
</script>
<style scoped>
.scroll {
  width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
}
.container {
  width: 100vw;
  height: 120px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont {
  font-size: 42px;
}
.content {
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  border-bottom: 1px solid #e9e9e9;
}
.img1 {
  width: 50px;
  padding: 0 20px 0 30px;
  display: flex;
  justify-content: center;
}
.img2 {
  width: 94px;
  height: 94px;
  border-radius: 45px;
  margin-right: 10px;
  padding:0;
}
.content_left {
  display: flex;
  height: 120px;
  align-items: center;
}
.content_right {
  padding-right: 20px;
  font-size: 36px;
  color: #e93636;
  font-weight: 700;
}
.content_right_1 {
  padding-right: 20px;
}
h6 {
  font-weight: 400;
  font-size: 30px;
}
.content_text span {
  color: #989898;
}
.m_t_b {
  margin: 20px 0 20px 0;
}
.tab2 {
  width: 100vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab2 ul {
  width: 100vw;
  height: 80px;
  display: flex;
  align-items: center;
}
.tab2 ul li {
  padding: 0 30px;
}
.tab2_active {
  color: orange;
}
.more {
  display: inline-block;
  width: 100vw;
  height: 50px;
  color: #000;
  text-align: center;
  line-height: 50px;
  background: #fff;
}
</style>
